<template>
    <div>
        <van-nav-bar
            style="background-color: #EDEDED;"
            title=""
            left-arrow
            @click-left="onClickLeft"
            />
        <div class="i-xinxi" hover-class="i-xinxi2" :hover-stay-time="50" >
            <img class="i-toxiang" :src="$store.state.list.uimg" mode="aspectFit" />
            <p class="i-xinming">{{$store.state.list.uname}}</p>
            <p class="i-Chats">Chats账号:{{$store.state.list.uaccount}}</p>
            <p class="i-xiaoyuehao"></p>
        </div>
        <ul style="margin-top: 180px;">
            <li style="width: 100%;background-color: #ffffff;height: 60px;" @click="setbeizhu">
                <p style="color: black;text-align: center;line-height: 60px;font-weight:bold;">设置备注</p>
            </li>
            <li style="width: 100%;background-color: #ffffff;height: 60px;" @click="Deletefriend">
                <p style="color: red;text-align: center;line-height: 60px;font-weight:bold;">删除好友</p>
            </li>
            
        </ul>
    </div>
</template>

<script>
import  Titlebar from './Titlebar.vue'
export default {
    name:'Deleteafriend',
    components:{Titlebar},
    methods:{
        onClickLeft(){
            // this.kongzhidonghua=false
            this.$router.push('/chatpage')
            
        },
        Deletefriend(){
            const options = {
                method: 'GET',
                headers: {
                    "Content-Type": 'application/json'
                }
            }
            fetch(`http://8.130.95.37:8085/DeleteFriend/${this.$store.state.udate.uid}/${this.$store.state.list.uid}`, options).then(res => res.json()).then(res => {
                console.log(res);
                if(res == 1){
                    this.$message({
                        message: '好友删除成功！',
                        type: 'success'
                    });
                }
            }).catch(err => {
                console.log(err)
            })
        },
        setbeizhu(){
            this.$message.error('该功能暂时没有开发~');
        }
        
    }
    
}
</script>

<style scoped>
.i-xinxi{
    width: 100%;
    background-color: #ffffff;
    float: left;
    height: 160px;
    
}
.i-xinxi2{
    width: 100%;
    background-color: #707070;
    float: left;
    height: 160px;
}
page{
    background-color: #F8F8F8;
}
.i-toxiang{
    background-color: black;
    width: 80px;
    height: 80px;
    margin-top: 10%;
    margin-left: 10%;
    float: left;
    border-radius: 10px;
}
.i-xinming{
    font-size: 25px;
    margin-top: 9%;
    margin-left: 33%;
}
.i-Chats{
    color: #dbdbdb;
    font-size: 15px;
    margin-top: 8%;
    margin-left: 33%;
}
.i-xiaoyuehao{
    color: #dbdbdb;
    font-size: 20px;
    float: right;
    margin-top: -6%;
    margin-right: 10%;
}

</style>
  